<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {% load staticfiles %}
    <!--引入JQuery-->
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery-3.2.1.min.js' %}"></script> 
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.easyui.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'website/jquery-easyui/jquery.min.js' %}"></script>      
    <script type="text/javascript" src="{% static 'website/js/common.js' %}"></script>    
    <script type="text/javascript" src="{% static 'website/jquery-easyui/locale/easyui-lang-zh_CN.js' %}"></script>    
    <link rel="stylesheet" type="text/css" href="{% static  'website/jquery-easyui/themes/default/easyui.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/themes/icon.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'website/jquery-easyui/demo/demo.css' %}">
    <script>
        var ifInsert = undefined; // 用于标记行是否是新增还是修改
        var editIndex = undefined;     // 用于存储正在编辑行的索引
        var ID = undefined;     // 存放行自增ID

        // 用于存储记录行中处于编辑，还未保存的值
        var project_name = undefined;  //项目名称
        var protocol = undefined;  //请求协议
        var host = undefined;      //主机地址
        var port = undefined;      //端口
        var environment = undefined;  //所属环境
        var environment_id = null; // 记录所属环境id
        var valid_flag = undefined;  //是否启用
        var order = undefined; // 顺序

        function onLoadSuccess(data) {
            // 修改“操作”列的按钮样式
            $('.insertRowBtn').linkbutton({text:'插入', plain:true, iconCls:'icon-add'});
            $('.editRowBtn').linkbutton({text:'修改', plain:true, iconCls:'icon-edit'});
            $('.deleteRowBtn').linkbutton({text:'删除', plain:true, iconCls:'icon-remove'});
            $('.moveUpBtn').linkbutton({text:'上移', plain:true, iconCls:'icon-edit'});
            $('.moveDownBtn').linkbutton({text:'下移', plain:true, iconCls:'icon-edit'}); 

            $('.saveRowBtn').hide();
            $('.cancelEditRowBtn').hide(); 

            editIndex = undefined;
            // 设置自动调整行高(主要是解决行号所在单元格和数据行错位问题)
            $('#API_project_setting').datagrid('fixRowHeight');
        }

        // 格式化【操作】列
        function formatOtherOperationColumn(value,row,index){
            var btn = "<a id='insertRowBtn" + index + "' class='insertRowBtn' onclick='insertRow("+JSON.stringify(row) +"," + index+")' href='javascript:void(0)'>插入</a> \
                    <a id='editRowBtn" + index + "' class='editRowBtn' onclick='editRow(" + row.id +"," + index+")' href='javascript:void(0)'>修改</a>\
                    <a id='deleteRowBtn" + index + "' class='deleteRowBtn' onclick='removeRow(\"API_project_setting\"," + row.id +"," + index+")' href='javascript:void(0)'>删除</a>\
                    <a id='moveUpBtn" + index + "' class='moveUpBtn' onclick='moveRow(\"API_project_setting\","
                        + index+", this)' href='javascript:void(0)'>上移</a> \
                    <a id='moveDownBtn" + index + "' class='moveDownBtn' onclick='moveRow(\"API_project_setting\"," + index+", this)' href='javascript:void(0)'>下移</a> \
                    <a id='saveRowBtn" + index + "' class='saveRowBtn' onclick='saveRow()' \
                     href='javascript:void(0)' style='display:none'>保存</a>\
                    <a id='cancelEditRowBtn" + index + "' class='cancelEditRowBtn' onclick='cancelEditRow(this)' \
                    href='javascript:void(0)' style='display:none'>取消</a>"; 
            return btn;
        }


        // 编辑时隐藏部分按钮
        function hideNoneEditBtn(editIndex) {
            $('#insertRowBtn' + editIndex).hide();
            $('#editRowBtn' + editIndex).hide();
            $('#deleteRowBtn' + editIndex).hide();
            $('#moveUpBtn' + editIndex).hide();
            $('#moveDownBtn' + editIndex).hide();         
            $('.saveRowBtn').linkbutton({text:'保存', plain:true, iconCls:'icon-ok'});
            $('.cancelEditRowBtn').linkbutton({text:'取消', plain:true, iconCls:'icon-cancel'});
            $('#saveRowBtn' + editIndex).show();
            $('#cancelEditRowBtn' + editIndex).show();
        }

        // 点击表格“插入|新增”按钮事件函数实现
        function insertRow(row, rowIndex) { 
            if (endEditing()) { 
               if (rowIndex == undefined) { // 点击 新增 按钮
                    editIndex = 0; 
                    order = '';
                } else { // 点击 插入 按钮
                    editIndex = rowIndex + 1;
                    order = row.order
                }     
                                
            
                $('#API_project_setting').datagrid('insertRow',{
                    index: editIndex, 
                    row: { }
                });

                hideNoneEditBtn(editIndex);
                
                $('#API_project_setting').datagrid('unselectAll');              
                var row = $('#API_project_setting').datagrid('selectRow', editIndex);
                $(row).datagrid('beginEdit', editIndex);

                $(row).datagrid('getEditor', {index: editIndex,field: 'protocol'}).target.combobox('setText', 'http');
                $(row).datagrid('getEditor', {index: editIndex,field: 'port'}).target.val('80');


                initDataForRowComponets('新增');

                ifInsert = true;
            }                
        }
      

        // 点击 保存 按钮的函数实现
        function saveRow(){
            if (editIndex == undefined) {
                $.messager.alert('提示', '操作失败，没有正在编辑的记录', 'info');
                return;
            } 
            if ($('#API_project_setting').datagrid('validateRow', editIndex)){
                $('#API_project_setting').datagrid('endEdit', editIndex);

                var isValid = true;
                if (project_name == '') {
                    $.messager.alert('提示','保存失败，项目名称不能为空', 'warnging');
                    isValid = false;
                } else if (protocol != 'http' && port == ''){
                    $.messager.alert('提示', '保存失败，非http协议，端口不能为空', 'warnging');
                    isValid = false;
                } else if (parseInt(port).toString() == 'NaN') {
                    $.messager.alert('提示', '保存失败，端口只能为数字', 'warnging');
                    isValid = false;
                } 

                if (!isValid){
                    ifInsert = undefined;
                    editIndex = undefined;
                    onLoadSuccess();
                    $('#API_project_setting').datagrid('reload');
                    return;  
                }

                if (ifInsert == true) { // 新增
                    var url = '/action/addAPIProjectSetting';
                    var params = {   
                        project_name:project_name,
                        protocol:protocol,
                        host:host,
                        port:port,
                        environment:environment,
                        environment_id:environment_id,
                        valid_flag:valid_flag,
                        order:order
                    };
                } else if (ifInsert == false) { // 修改
                    var url = '/action/editAPIProjectSetting';
                    var params = {
                        id:ID,
                        project_name:project_name,
                        protocol:protocol,
                        host:host,
                        port:port,
                        environment:environment,
                        environment_id:environment_id,
                        valid_flag:valid_flag,
                        order:order
                    };
                }

                $.post(url, params, function(data,status){
                        if (data == 'success') {
                            $.messager.alert('提示','保存成功', 'info');
                        } else {
                            $.messager.alert('错误', '保存失败: ' + data, 'error');
                        }
                        $('#API_project_setting').datagrid('reload');        
                    }
                ); 
            } else {
                $.messager.alert('告警', '保存失败,请检查是否设置必填(必选)项', 'error');
                $('#API_project_setting').datagrid('reload');
            }

            ifInsert = undefined;
            editIndex = undefined; 
            onLoadSuccess();
        }

        // 点击 取消 按钮的函数实现
        function cancelEditRow() {
            if (editIndex == undefined) {
                $.messager.alert('提示', '操作失败，没有正在编辑的记录', 'info');
                return;
            } 
            $('#API_project_setting').datagrid('endEdit', editIndex);             
            $('#API_project_setting').datagrid('reload', editIndex);
         
            ifInsert = undefined;
            editIndex = undefined;
            onLoadSuccess();                       
        }
 
        // 结束编辑
        function endEditing(){
            if (editIndex == undefined) {
                return true;
            } else {
                $.messager.alert('提示', '您还有记录未保存', 'warnging');
                return false;
            }
        }

        // 结束编辑时自动触发的事件函数实现
        function onEndEdit(index, row) {
            // 获取单元格中输入的内容
            project_name = $(this).datagrid('getEditor', {index: index,field: 'project_name'}).target.val();
            protocol = $(this).datagrid('getEditor', {index: index,field: 'protocol'}).target.combobox('getText');
            host = $(this).datagrid('getEditor', {index: index, field: 'host'}).target.val();  
            port = $(this).datagrid('getEditor', {index: index, field: 'port'}).target.val();                   
            environment = $(this).datagrid('getEditor', {index: index,field: 'environment'}).target.combobox('getText');
            valid_flag = $(this).datagrid('getEditor', {index: index,field: 'valid_flag'}).target.combobox('getText');
        }

        // 点击表格 修改 按钮的函数实现
        function editRow(rowID, index){
            if (endEditing()) { 
                if (index == undefined) { // 点击表格上方的 修改 按钮
                    //获取选中行的数据  
                    var rowsSelected = $('#API_project_setting').datagrid('getSelections');
                    if (rowsSelected.length < 1) {  //如果没有选中行，提示信息  
                        $.messager.alert("提示消息", "请选择要修改的记录！", 'info');  
                        return;  
                    } else if (rowsSelected.length > 1) {
                        $.messager.alert("提示信息", "每次只能选择一条记录！", 'info');
                        return;
                    }
                    editIndex = $('#API_project_setting').datagrid('getRowIndex', rowsSelected[0]);
                    ID = rowsSelected[0].id;
                } else { // 点击记录行所在的 修改 按钮
                    ID = rowID;
                    editIndex = index;
                }

                hideNoneEditBtn(editIndex);  
                $('#API_project_setting').datagrid('unselectAll');               
                var row = $('#API_project_setting').datagrid('selectRow', editIndex);


                $(row).datagrid('beginEdit', editIndex);
                rowsSelected = $('#API_project_setting').datagrid('getSelections');
                var envIDList = rowsSelected[0].environment_id.toString().split(',');
                initDataForRowComponets('修改', envIDList);
                ifInsert = false;              
            }  
        }

        // 初始化行记录组件值
        function initDataForRowComponets(opType, envIDList) {
            var environmentEditor = $('#API_project_setting').datagrid('getEditor', {index: editIndex, field:'environment'});
            var validFlagEditor = $('#API_project_setting').datagrid('getEditor', {index: editIndex, field:'valid_flag'});
            // 请求环境配置
            $.get('/action/getEnvs', function(data,status) {
                var jsonData = JSON.parse(data);
                if (jsonData['result'] == 'success') {
                    $(environmentEditor.target).combobox('loadData', jsonData['data']);
                } else {
                    $.messager.alert('错误信息', '获取可用环境列表出错: ' + jsonData['data'], 'error');
                }
            });

            if (opType=='新增') {
                $(validFlagEditor.target).combobox('setText', '启用');
            } else if (opType == '修改') {
                var environmentEditor =  $('#API_project_setting').datagrid('getEditor', {index: editIndex, field: 'environment'});
                $(environmentEditor.target).combobox('setValues', envIDList);
            }
        }

        //选择所属环境下拉列表项时触发事件
        function onSelectForEnvCombobox(row) {
            environment_id = row.id
        }

    </script>
</head>
<body>
    <table class="easyui-datagrid" rownumbers="true" pagination="true" id="API_project_setting"
        data-options="border:false,
        singleSelect:false,
        fit:true,
        fitColumns:false,
        collapsible: true,
        toolbar: toolbar, 
        rownumbers: true, 
        pageSize: 25,//每页显示的记录条数，默认为10    
        pageList: [25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100],//可以设置每页记录条数的列表         
        url: '/action/loadAPIProjectSettings',
        method: 'get',
        onEndEdit:onEndEdit,
        onLoadSuccess:onLoadSuccess"> 
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'id', align: 'center', fitColumns:true">ID</th>
                <th data-options="field:'project_name', align: 'left', editor:{type:'text', options:{required:true}}" width="200px">项目名称</th>
                <th data-options="field:'protocol', align: 'center', editor:{type:'combobox', 
                options:{
                valueField:'id',
                textField:'choice',
                required:true,
                panelHeight:'auto',
                editable:false,
                data:[{id:0, choice:'http'},{id:1, choice:'https'}]
                }}" width="60px">协议</th>
                <th data-options="field:'host', align: 'left', editor:{type:'text', options:{required:true}}" width="200px">主机地址</th>
                <th data-options="field:'port', align: 'center', editor:{type:'text', options:{required:true}}" width="70px">端口</th>
                <th data-options="field:'environment', align: 'center', editor:{
                        type:'combobox',
                        options:{
                            valueField:'id',
                            textField:'choice',
                            required:true,
                            panelHeight:'auto',
                            editable:false,
                            onSelect:onSelectForEnvCombobox
                        }}" width="120px">所属环境</th>
                <th data-options="field:'valid_flag', align: 'center',fitColumns:true, editor:{
                    type:'combobox',
                        options:{
                            valueField:'id',
                            textField:'choice',
                            data:[{id:0,choice:'禁用'},{id:1,choice:'启用'}],
                            required:true,
                            panelHeight:'auto',
                            editable:false
                        }}">是否启用</th>
                <th data-options="field:'order', align: 'center', fitColumns:true" width='50px'>顺序</th>    
                <th data-options="field:'operations', title:'操作', align: 'center',
                    formatter:function(value,row,index){return formatOtherOperationColumn(value,row,index);}"  
                    width="300px">操作</th>   
            </tr>
        </thead> 
    </table>

    <!--增加工具条-->
   <script type="text/javascript">
        var toolbar = addToolbar('API_project_setting'); 
   </script>   
</body>
</html>
